<template>
    <div class="main-content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="query" ref="query" slot="form" label-width="80px" label-position="right" >
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="学校名称">
                             <school v-model="query.schoolName" style="width:100%" @change='schoolChange'></school>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-button type="primary" class="top-btn" @click="searchData">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <div class="table-title" slot="table-title">
            </div>
            <el-table :data="tableData" border v-loading="loading" style="width: 100%">
                <el-table-column label="学校" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sSchoolName}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="商品名称" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sServiceName}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="购买数量（张）" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sCardCouponsNum}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="订单销售额（元）" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sOrderMoney}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="活动价格（元）" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sShouldPayMoney}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="购买时间" width="170" align="center">
                    <template scope="scope">
                        <span>{{ scope.row.sCreateTime | dateFilter}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="发放状态" align="center">
                    <template scope="scope">
                        <span v-if="scope.row.sStatus == 0">未发放</span>
                        <span v-if="scope.row.sStatus == 1">已发放</span>                       
                        <span v-if="scope.row.sStatus == 2">拒绝发放</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="160">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="audit(scope.row)">详情</el-button>
                        <el-button type="text" v-if="scope.row.sStatus==2" class="btn-success"
                         @click="checkReason(scope.row.sReason)">查看原因</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pageQuery.total" 
                :current-page.sync="pageQuery.currentpage" :page-sizes="config.pageSizes" :page-size="config.pageSize" 
                @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>

        <!-- 审核dialog -->
        <!-- <audit-card :auditData='auditData'></audit-card> -->
    </div>
</template>

<script>
    import Levelbar from '../../layout/Levelbar';
    import TableLayout from 'components/TableLayout';
    import school from 'components/SchoolClasss/school';
    // import buyCheckDetail from './buyCheckDetail';
    import { listVoucherPurchaseRecord } from 'api/cardCoupons';
    import { mapState, mapActions } from 'vuex';

    export default {
        name: 'cardBuyRecordList',
        components: { Levelbar, TableLayout, school },
        data() {
            return { 
                auditData: {
                    dialogState: false,
                    id: ''
                },
                loading: true,  
                tableData: [],
                pageQuery: {
                    currentpage: 1,
                    total: 0
                },
                query: {
                    schoolName: '',
                    schoolId: ''
                }
            }
        },
        // watch: {// 局部刷新列表 2018-1-10 by cuihd
        //     cacheUpdated(val) {
        //         val && this.searchFetchData();
        //     }
        // },
        created() {
            this.queryData();
        },
        computed: {
            ...mapState({
                config: state => state.config.table
                // cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表 2018-1-10 by cuihd
            })
        },
        filters: {
            dateFilter(val) {
                if (val) {
                    return val.substring(0, 19)
                } else {
                    return '暂无'
                }               
            }
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.pageQuery.currentpage = 1;
                this.ChangePageSize(val);
                this.queryData();
            },
            handleCurrentChange(val) {
                this.pageQuery.currentpage = val;
                this.queryData();
            },
            searchData() {
                this.pageQuery.currentpage = 1;
                this.queryData();
            },
            // 卡券购买记录
            queryData() {
                this.loading = true;
                listVoucherPurchaseRecord(this.query.schoolId, this.pageQuery.currentpage, this.config.pageSize).then(response => {
                    this.tableData = response.data.content.list;
                    this.pageQuery.total = response.data.content.pagination.total;
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                });
            },
            // 查询详情
            audit(row) {
                this.auditData.dialogState = true;
                this.auditData.id = row.id;
                this.$router.push({path: `buyCheckDetail/${row.pId}`})
            },
            // 查看原因
            checkReason(reason) {
                let reject = reason ? reason : '暂无驳回原因';
                this.$alert(reject, '查看原因', {
                    callback: action => {
                        return 
                    }
                });
            },
            // 获取学校id
            schoolChange(val) {
                this.query.schoolId = val
            }
            
        }

    }
</script>

<style lang="scss" scoped>

</style>

